<template>
  <div>
    <div class="goods-wrapper">
      <div class="goods-left">
        <div class="image-wrapper">
          <div class="image-div">
            <pic-zoom v-if="imageList.length>0" :url="activeImageUrl" :scale="3"></pic-zoom>
          </div>
        </div>
        <div class="image-list-div">
          <div class="image-operation">
            <a-icon type="left"/>
          </div>
          <div class="image-list-wrapper">
            <div class="image-list">
              <div class="image" v-for="(image,index) in imageList" :key="index"
                   @click="activeImageIndex=index">
                <img :src="image" alt=""/>
              </div>
            </div>
          </div>
          <div class="image-operation right">
            <a-icon type="right"/>
          </div>
        </div>
      </div>
<!--      <div class="goods-right">
        <div class="goods-name-wrapper">
          <div class="goods-name">{{ data.goodsName }}</div>
          &lt;!&ndash; <div class="goods-type">{{ dataDictMap.DELIVERY_FORM ? dataDictMap.DELIVERY_FORM[data.deliveryForm] : '' }}</div> &ndash;&gt;
        </div>
        <div class="goods-desc">
          <p>产品ID：{{ data.id }}</p>
          <p>所属类目：{{ data.goodsTypeNameFull }}</p>
          <p>产品品牌：{{ data.goodsBrandName }}</p>
          <p>产品编码：{{ data.productCode }}</p>
          <p>计量单位：{{ data.measurementUnit }}</p>
          <p><span>供应商：{{ data.supplierName }}  </span>
&lt;!&ndash;            <img src="@/assets/images/user.png" alt/>&ndash;&gt;
            <span>{{ data.legalRepresent }}</span>

&lt;!&ndash;            <img src="@/assets/images/phone.png" alt/>&ndash;&gt;
            <span>{{ data.contactPhone }}</span>
          </p>
        </div>
        &lt;!&ndash; <div class="goods-desc">
          {{ data.goodsDesc }}
        </div>
        <div class="goods-info-wrapper">
          <div class="goods-price">
            <span class="left">价格：</span>
            <template v-if="data.chargeType!==3">¥{{ amount }}</template>
            <template v-else>面议</template>
            <span>{{ unit }}</span>
          </div>
        </div> &ndash;&gt;
        &lt;!&ndash; <div class="goods-application">
          <div class="goods-application-item">
            <svg-icon icon-class="data_type" size="14" style="margin-right: 3px;"></svg-icon>
            应用行业：
            <span class="goods-application-item-content" :title="data.applicationIndustry">
              {{ data.applicationIndustry }}
            </span>
          </div>
          <div class="goods-application-item">
            <svg-icon icon-class="data_scene" size="14" style="margin-right: 3px;"></svg-icon>
            应用场景：
            <span class="goods-application-item-content" :title="data.applicationScenario">
              {{ data.applicationScenario }}
            </span>
          </div>
        </div>
        <div class="goods-spec" v-if="specList.length>0">
          <div class="goods-spec-left">规格：</div>
          <div class="goods-spec-right">
            <div class="goods-spec-item" @click="changeSpec(item,index)" v-for="(item,index) in specList" :key="index"
                 :class="{'active':activeSpecIndex===index}">
              {{ item.showString }}
              <svg-icon v-if="activeSpecIndex===index" width="20" height="16" class="checked"
                        icon-class="checked"></svg-icon>
            </div>
          </div>
        </div>
        <div class="supplierName" v-if="data.supplierName"> {{data.supplierName}} </div> &ndash;&gt;
      </div>-->
    </div>
<!--    <description ref="desc" :active-desc-key="activeDescKey" :spec-list="specList" :api-list="data.goodsApiConfList" :goodData="data" :detail="data.goodsDetail" :delivery-form="data.deliveryForm" :goods-params-value-list="goodsParamsValueList" :goods-application-conf="data.goodsApplicationConf" @change="changeDesc"></description>-->
    <!-- <description ref="desc" :active-desc-key="activeDescKey" :spec-list="specList" :data="data"   :goods-params-value-list="goodsParamsValueList" @change="changeDesc"></description> -->
  </div>
</template>

<script>
import PicZoom from 'vue-piczoom'
// import Description from "./Description";

export default {
  name: "goodsDetailComponent",
  components: {
    PicZoom,
    // Description
  },
  provide(){
    return {
      showOnline:this.showOnlineTest
    }
  },
  props: {
    data: {},
    dataDictMap: {},
    imageList: {
      type: Array,
      default: () => []
    },
    specList: {
      type: Array,
      default: () => []
    },
    apiList: {
      type: Array,
      default: () => []
    },
    statusList: {
      type: Array,
      default: () => []
    },
    goodsParamsValueList: {
      type: Array,
      default: () => []
    },
    showOnlineTest: {
      type:Boolean,
      default:false
    }
  },
  computed: {
    activeImageUrl() {
      return this.imageList[this.activeImageIndex]
    },
    amount() {
      return this.specList.length > 0 ? Number(this.specList[this.activeSpecIndex].amount) : 0
    },
    unit() {
      let result = ''
      if (this.data.chargeType === 2 || this.data.chargeType === 3) {
        // 免费 或 面议
        return result
      }
      const condition = this.specList.length > 0 ? this.specList[this.activeSpecIndex].condition : ''
      if (this.data.chargeDimension === 2) {
        // 按次数计费
        result = '元/' + condition + '次'
      } else {
        // 按时间计费
        if (condition) {
          result = '元/' + this.dataDictMap.GOODS_CHARGE_TYPE[condition]
        }
      }
      return result
    }
  },
  data() {
    return {
      activeImageIndex: 0,
      activeSpecIndex: 0,
      activeDescKey: 'detail'
    }
  },
  methods: {
    changeSpec(item, index) {
      this.activeSpecIndex = index
    },
    changeDesc(e) {
      this.activeDescKey = e
    },
  }
}
</script>

<style scoped lang="scss">
$mainColor: #0078FE;
.goods-wrapper {
  width: 100%;
  display: flex;
  align-items: flex-start;

  .goods-left {
    width: 300px;

    .image-wrapper {
      width: 300px;
      height: 300px;

      .image-div {
        width: 100%;
        height: 100%;
        border: 1px solid #E2E2E2;
      }
    }

    .image-list-div {
      width: 300px;
      height: 60px;
      margin-top: 10px;
      display: flex;
      align-items: center;

      .image-operation {
        width: 15px;
        height: 60px;
        border: 1px solid #efefef;
        background: #FAFAFA;
        border-radius: 4px 0 0 4px;
        color: #cbcbcb;
        display: flex;
        cursor: pointer;
        align-items: center;

        &.right {
          border-radius: 0 4px 4px 0;
        }

        &:hover {
          border-color: #ececec;
          background: #f9f9f9;
          color: #cfcfcf;
        }
      }

      .image-list-wrapper {
        flex: 1;
        width: 0;
        margin: 0 5px;
        height: 60px;
        white-space: nowrap;
        overflow-x: auto;

        .image-list {
          display: flex;
          align-items: center;
          width: fit-content;

          .image {
            width: 60px;
            height: 60px;
            margin-right: 7px;
            cursor: pointer;
            border: 1px solid transparent;

            img {
              width: 100%;
              height: 100%;
            }

            &:last-child {
              margin-right: 0;
            }
          }
        }

        &::-webkit-scrollbar {
          display: none;
        }
      }
    }
  }

  .goods-right {
    flex: 1;
    margin-left: 20px;

    .goods-name-wrapper {
      margin-top: 8px;
      display: flex;
      align-items: center;

      .goods-name {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC, sans-serif;
        font-weight: 500;
        color: #323232;
        line-height: 18px;
      }

      .goods-type {
        border-radius: 2px;
        border: 1px solid $mainColor;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: $mainColor;
        padding: 5px 10px;
        line-height: 12px;
        margin-left: 10px;
      }
    }

    .goods-desc {
      margin-top: 16px;

    p {
      line-height: 45px;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #646464;
    }
    img {
      width: 20px;
      vertical-align: middle;
      margin: 0 10px;
    }
    span {
      vertical-align: middle;

    }
    }
    .supplierName{
      border: 1px solid #1785FF;
      padding: 3px 12px;
      border-radius: 6px;
      margin-top: 14px;
    }
    .goods-info-wrapper {
      padding: 28px 20px;
      margin-top: 20px;
      background: #FFFFFF;
      box-shadow: 0 0 10px 0 rgba(0, 120, 254, 0.1);
      border-radius: 10px;
      border: 1px solid #1785FF;
      display: flex;
      align-items: center;

      .goods-price {
        display: flex;
        align-items: flex-end;
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC, sans-serif;
        font-weight: 500;
        color: #E03437;
        line-height: 24px;
        flex: 1;

        span {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          font-weight: 400;
          color: #646464;
          line-height: 12px;
          margin-left: 6px;
          margin-bottom: 2px;

          &.left {
            margin-left: 0;
            margin-right: 10px;
          }
        }
      }

      .goods-id {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #646464;
        margin-right: 40px;
        line-height: 12px;
      }

      .goods-sales {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #646464;
        line-height: 20px;
        padding-right: 20px;
        border-right: 1px dotted #e2e2e2;
        margin-right: 20px;
      }

      .goods-rate {
        background: #FEF9F2;
        border-radius: 10px;
        padding: 3px 8px;
        display: flex;

        .goods-rate-star {
          margin-right: 4px;

          &:last-child {
            margin-right: 0;
          }
        }

        &.none {
          background: #FAFAFA;
        }
      }
    }

    .goods-application {
      display: flex;
      align-items: flex-start;
      margin-top: 20px;

      .goods-application-item {
        display: flex;
        align-items: flex-start;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #646464;
        line-height: 14px;
        flex: 1;
        width: 0;
        overflow: hidden;
        text-overflow: ellipsis;

        &:last-child {
          margin-left: 80px;
        }

        .goods-application-item-content {
          color: #323232;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .goods-spec {
      margin-top: 10px;
      display: flex;
      align-items: flex-start;
      padding-bottom: 10px;

      .goods-spec-left {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #646464;
        line-height: 30px;
        margin-top: 10px;
      }

      .goods-spec-right {
        flex: 1;
        display: flex;
        flex-wrap: wrap;

        .goods-spec-item {
          cursor: pointer;
          background: #FFFFFF;
          border-radius: 6px;
          border: 1px solid #E2E2E2;
          line-height: 28px;
          padding: 0 16px;
          margin-left: 10px;
          margin-top: 10px;
          position: relative;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          font-weight: 400;
          color: #323232;
          z-index: 1;

          &.active {
            border-color: #E03437;
          }

          &:hover {
            border-color: #E03437;
          }

          .checked {
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: 9;
          }
        }
      }
    }
  }
}
</style>
